<template>
	<div class="update" @click="update">
		<span class="Symbol-title">
			主图	
		</span>
		<div class="camera-icn iconfont">
			&#xe663;
		</div>
		<div class="bottom-text">
			上传图片
		</div>
	</div>
	<input type="file" ref='file' multiple="multiple"  v-show="false" @change="btn($event)">
	
	<div class="hr">
		<div></div>
	</div>

	<div class="imgs">
		<div v-for="(item,index) in arrs" class="box">
			<div class="drop" @click="drop(index)">
				x
			</div>
			<img :src="item" alt="加载中....">
		</div>
	</div>
	
	<!-- 提交 -->
	
</template>
	<script>
		import {defineComponent,ref,inject,watch} from 'vue';
	  export default defineComponent({
			props:{
				imgs:{
					type:Array,
					default:[]
				}
			},
			methods:{
				drop(index){
					console.log('drop')
					this.arrs.splice(index,1)
					this.PullImgs(this.arrs)
				},
				clear(){
					this.arrs=[];
				},
				update(){
					this.$refs.file.click()
				},
				btn($event){
					var file=$event.target.files
					 for(let i=0;i<file.length;i++){
							let fileUrl = URL.createObjectURL(file[i]);  // 获取文件url
							this.arrs.push(fileUrl)
					 }
					 this.PullImgs(this.arrs)
					 // console.log(this.arrs)
				
				}
			},
			setup(props,context){
				let arrs=ref([]);
				let PullImgs=inject('GetImgs')
				var imgs=props.imgs;
				if(imgs.length>=0){
					arrs.value=imgs;
					PullImgs(arrs.value)
					console.log('ok')
				}
				watch(()=>props.imgs,(newVal,oldVal)=>{
					if(imgs.length>=0){
						arrs.value=newVal;
					}
					PullImgs(arrs.value)
				})
				return{
					arrs,
					PullImgs
				}
			}
	  })	
	</script>

<style>
	.update{
		width: 15vw;
		height: 15vw;
		border:1px solid #ccc;
		border-radius: 10%;
		position: relative;
		overflow: hidden;
	}
	.Symbol-title{
		position: absolute;
		left: -0px;
		top:-0px;
		padding:3px;
		font-size: .4em;
		border-radius: 10%;
		color:#fff;
		background-color: #3377cc;
	}
	.camera-icn{
		color:#ccc;
		font-size: 2em;
		text-align: center;
		line-height: 15vw;
	}
	.bottom-text{
		width:100%;
		font-size: .2em;
		color:#ccc;
		text-align: center;
		position: absolute;
		bottom:1px;
		left:0;
	}
	.imgs{
		
		display: flex;
		flex-direction: row;
		overflow-x: scroll;
		padding:10px;
	}
	.imgs .box{
		min-width: 50%;
		margin-left: 10px;
		border:1px solid #ccc;
		padding:3px;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.imgs .box .drop{
		width: 1.5em;
		text-align: center;
		line-height: 1.5em;
		position: absolute;
		color:#fff;
		right: 0;
		top:0;
		background-color: rgb(0,0,0,.5);
	}
	.imgs .box img{
		width:100%;
		max-height: 30vh;
	}
	.hr{
		width: 100%;
		border-bottom: 1px solid #ccc;
		margin:5px 0;
		transform: scaleY(.3);
	}
</style>
